/*
 * @Author: hechengfei h349187021@163.com
 * @Date: 2022-08-11 15:10:40
 * @LastEditors: hechengfei h349187021@163.com
 * @LastEditTime: 2022-08-23 16:03:07
 * @FilePath: \xiangmu\src\components\contractmanagement\ContractNav.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    Link,
    Outlet
} from 'react-router-dom'
import DetalSaerch from './DetalSaerch';
import NewContract from './NewContract';
import { DownOutlined } from "@ant-design/icons";
import '../../assets/css/contract/ContractNav.css'
import { Button, Modal } from 'antd';
import React, { useState, useEffect } from 'react';
import { inject, observer } from 'mobx-react'
import Addcontract from './Addcontract';
function ContractNav(props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisible6, setIsModalVisible6] = useState(false);
    const [ischangeclickcolpr, setchangeclickcolpr] = useState(0)
    const [userinp, setuserinp] = useState('')
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
        console.log(props.contractStore.contractuserinp);
        props.contractStore.getcustomertoadd(props.contractStore.contractuserinp)
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //新增合同
    const showModal6 = () => {
        setIsModalVisible6(true);
    };
    const handleOk6 = () => {
        setIsModalVisible6(false);
        console.log('11111', props.contractStore.addcontractinfo);
        props.contractStore.getaddcontractinfo(props.contractStore.addcontractinfo)
        props.contractStore.getcontractData({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })
    };
    const handleCancel6 = () => {
        setIsModalVisible6(false);
    };
    // 初始渲染
    useEffect(() => {
        chushixunran({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })
    }, [])
    const changeclickcolpr = (e) => {
        setchangeclickcolpr(e.currentTarget.getAttribute("data-index"))
    }
    const chushixunran = ({ currentPage, pageSize }) => {
        props.contractStore.getcontractData({ currentPage, pageSize })
    }
    const todayadd = ({ currentPage, pageSize }) => {
        props.contractStore.getcontracttodayaddData({ currentPage, pageSize })
    }
    const weekadd = ({ currentPage, pageSize }) => {
        props.contractStore.getcontractweekaddData({ currentPage, pageSize })
    }
    const monthadd = ({ currentPage, pageSize }) => {
        props.contractStore.getcontractmonthaddData({ currentPage, pageSize })
    }
    const duetoday = ({ currentPage, pageSize }) => {
        props.contractStore.getconractduetotoday({ currentPage, pageSize })
    }
    const dueweek = ({ currentPage, pageSize }) => {
        props.contractStore.getconractduetoweek({ currentPage, pageSize })
    }
    const duemonth = ({ currentPage, pageSize }) => {
        props.contractStore.getconractduetomonth({ currentPage, pageSize })
    }
    const searchlowlv = () => {
        let obj = {
            currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize,
            the_unknown_fields: userinp
        }
        props.contractStore.getsearchcontractinfo(obj)
    }
    const searchlowlvjiant = (e) => {
        setuserinp(e.target.value)
    }

    const tiaoshu = props.contractStore.DisplayContractInfo.length
    return (
        <>
            {/* <Router> */}
            <div className='ContractNavcontainer'>
                <ul className='ContractNavRouter'>
                    <li><button className='ContractAlingcenter' id={"0" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="0"><Link to="/home/ContractList" onClick={() => chushixunran({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>合同列表<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractAlingcenter' id={"1" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="1"><Link to="/home/TodayAdd" onClick={() => todayadd({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>今日新增<span>{tiaoshu}</span></Link></button> </li>
                    <li><button className='ContractAlingcenter' id={"2" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="2"><Link to="/home/WeekAdd" onClick={() => weekadd({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>本周新增<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractAlingcenter' id={"3" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="3"><Link to="/home/MonthAdd" onClick={() => monthadd({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>本月新增<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractAlingcenter' id={"4" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="4"><Link to="/home/DuetoTody" onClick={() => duetoday({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>今日到期<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractAlingcenter' id={"5" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="5"><Link to="/home/DuetoWeek" onClick={() => dueweek({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>本周到期<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractAlingcenter' id={"6" === ischangeclickcolpr ? "changeclickcolor" : ""}
                        onClick={changeclickcolpr}
                        data-index="6"><Link to="/home/DuetoMonth" onClick={() => duemonth({ currentPage: props.contractStore.currentPage, pageSize: props.contractStore.pageSize })}>本月到期<span>{tiaoshu}</span></Link></button></li>
                    <li><button className='ContractOutData ContractAlingcenter'>数据导出</button></li>
                    <li><Button type="primary" onClick={showModal}>新增客户</Button></li>
                    <li><Button type="primary" onClick={showModal6}>新增合同</Button></li>
                </ul>
                <button className='ContractbtnSearch' onClick={() => props.contractStore.getDetalSaerch()}>高级搜索
                    <DownOutlined className={props.contractStore.isdisplayDetalSearch ? 'arrowup' : 'arrowdown'} />
                </button>
                <button className='Contractbtn' onClick={searchlowlv}>搜索</button>
                <input type="text" onChange={(e) => { searchlowlvjiant(e) }} className='ContractInp' />
            </div>
            <>
                <Modal title="新增客户" visible={isModalVisible} width={1000} onOk={handleOk} onCancel={handleCancel}>
                    <NewContract />
                </Modal>
            </>
            <>
                <Modal title="新增合同" visible={isModalVisible6} width={1000} onOk={handleOk6} onCancel={handleCancel6}>
                    <Addcontract />
                </Modal>
            </>
            <DetalSaerch />
            <Outlet />
            {/* <Routes>
                    <Route index element={<ContractList />}></Route>
                    <Route path='/ContractList' element={<ContractList />}></Route>
                    <Route path='/TodayAdd' element={<TodayAdd />}></Route>
                    <Route path='/WeekAdd' element={<WeekAdd />}></Route>
                    <Route path='/MonthAdd' element={<MonthAdd />}></Route>
                    <Route path='/DuetoTody' element={<DuetoTody />}></Route>
                    <Route path='/DuetoWeek' element={<DuetoWeek />}></Route>
                    <Route path='/DuetoMonth' element={<DuetoMonth />}></Route>
                </Routes> */}
            {/* </Router> */}
        </>
    )
}
export default inject('contractStore')(observer(ContractNav))